<template>
  <div class="titleBarContainer">
    <img :class="getGoBackBtnCss" @click="closeDevicePage" />
    <div class="title">{{ this.title }}</div>
    <img class="rightBtn" @click="gotoSetting" v-show="this.showRightBtn" />
  </div>
</template>
<script>
import {
  setNavigationVisible,
  finishDeviceActivity,
  jumpToSetting,
  setgoSettingListener,
} from "../../../assets/js/device.js";
import eventBus from "../../../assets/js/eventbus.js";
export default {
  props: {
    titleProp: {
      type: String,
      default: "",
    },
    //页面类型：1-主页面，2-二级页面，3-三级页面
    pageTypeProp: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      title: "九牧智能设备",
      pageType: 1, //页面类型：1-主页面，2-二级页面，3-三级页面
    };
  },
  created() {
    //设置智慧生活标题栏可见性（这里使用自定义标题栏，所以要隐藏)
    setNavigationVisible(false);
    //设置点击“设置”按钮事件监听器
    setgoSettingListener(this.updateGotoSetting);
  },
  mounted() {
    this.title = this.titleProp;
    this.pageType = this.pageTypeProp;

    //添加监听器：右滑或点击系统返回键关闭页面
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.closeDevicePage, false);
    }
  },
  destroyed() {
    //移除监听器：右滑或点击系统返回键关闭页面
    window.removeEventListener("popstate", this.closeDevicePage, false);
  },
  watch: {
    titleProp(newVal) {
      this.title = newVal;
    },
  },
  computed: {
    getGoBackBtnCss() {
      if (this.pageType === 1) {
        return "titleBarMainPageGoBackBtn";
      } else {
        return "titleBarSecondPageGoBackBtn";
      }
    },
    showRightBtn() {
      return this.pageType === 1;
    },
  },
  methods: {
    //跳转到设置页面
    gotoSetting() {
      //跳转到智慧生活默认的设置页面
      jumpToSetting();
    },
    updateGotoSetting() {
      console.log("跳转到设置页面成功");
    },
    //退出控制页面
    closeDevicePage() {
      if (this.pageType === 1) {
        finishDeviceActivity();
      } else {
        //replace替换原路由，作用是避免回退死循环
        this.$router.replace({ path: "/" });
        //关闭页面返回上一级页面时，向上一级页面发送消息
        eventBus.$emit("SettingPage_goback", "我是设置页面的数据");
        // this.$router.go(-1);//添加右滑或点击系统返回键退出页面的监听器后，不能调用原路由返回
      }
    },
  },
};
</script>
<style scoped>
.titleBarContainer {
  width: 100%;
  height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--current-background-color);
}
.titleBarContainer .title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis; /* ellipsis表示省略号效果，clip 表示截取的效果 */
  white-space: nowrap; /* 不换行 */
  margin-left: 16px;
  margin-right: 16px;
  font-size: 20px;
  color: var(--current-primary-color);
}
.titleBarContainer .rightBtn {
  width: 24px;
  height: 24px;
  margin-right: 24px;
  content: var(--current-titlebar-more-src);
}
/* 一级页面 返回按钮样式 */
.titleBarMainPageGoBackBtn {
  width: 24px;
  height: 24px;
  margin-left: 24px;
  content: var(--current-titlebar-goback-src);
}

/* 二级页面 返回按钮样式 */
.titleBarSecondPageGoBackBtn {
  width: 24px;
  height: 24px;
  margin-left: 24px;
  content: var(--current-titlebar-goback-src);
}
</style>
